<template>
  <swiper>
    <swiper-item v-for="item in focusData" :key="item">
      <div
        class="bg-focus"
        :style="{
          backgroundImage: 'url(' + 'http://localhost:3000/' + item + ')'
        }"
      ></div>
    </swiper-item>
  </swiper>
</template>

<script>
import { Swiper, SwiperItem } from '@/components/common/swiper';
import { getFocus } from '@/network/api';

export default {
  name: 'HomeSwiper',
  data() {
    return {
      focusData: []
    };
  },
  created() {
    this.getFocusData();
  },
  components: {
    Swiper,
    SwiperItem
  },
  methods: {
    getFocusData() {
      let data = [];
      getFocus().then(res => {
        res.data.forEach(el => {
          let url = el.pic.replace(/\\/g, '/');
          data.push(url);
        });
        console.log(data);
        this.focusData = data;
      });
    }
  }
};
</script>

<style scoped lang="less">
.bg-focus {
  width: 100%;
  height: 800px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
</style>
